<template>

    <div class="b-page b-parking-new b-parking-new_bg_clouds" cz-shortcut-listen="true">
      <div class="ErrorPage">

        <div class="ErrorPage-container">
          <div class="ErrorPage-text">
            <h1 class="ErrorPage-title">404</h1>
            <p class="ErrorPage-subtitle"><b>图云教育:</b>你似乎来到了没有知识存在的荒原</p>
            <Button class="ErrorPage-primaryButton" @click="toHome()" style="width: 100px;height: 50px">去往首页</Button>
          </div>
          <div class="ErrorPage-errorImageContainer">
            <img src="@/assets/404.svg" alt="" class="ErrorPage-errorImage" style="width: 100%;height: 100%">
          </div>
        </div>
      </div>
    </div>

</template>

<script>
  export default {
    name: 'NotFount',
    methods:{
      toHome(){
        this.$router.replace({ path: '/' })
      }
    }
    // mounted () {
    //   document.getElementById("background").setAttribute('style', 'background-image: url("./404.png")')
    // }
  }
</script>

<style scoped>

  @keyframes moveClouds {
    0% {
      background-position: 100vw 35%
    }
    to {
      background-position: -105vw 35%
    }
  }

  @keyframes moveCityClouds {
    0% {
      background-position: 100vw 35%, bottom, center bottom 33vh
    }
    to {
      background-position: -105vw 35%, bottom, center bottom 33vh
    }
  }

  .b-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 320px;
    height: 100%;
    padding: 60px 0 0;
    margin: 0;
    font: 12px Arial, Helvetica Neue, Helvetica, FreeSans, sans-serif;
    background: #fff;
    color: #364364;
    -webkit-tap-highlight-color: transparent
  }

  html:not(.is_adaptive) .b-page {
    overflow-x: hidden
  }

  @media (min-width: 1024px) {
    .is_adaptive .b-page {
      overflow-x: hidden
    }
  }

  html:not(.is_adaptive) .b-page {
    padding-top: 0;
    min-width: 996px
  }


  @media (min-width: 1024px) {
    .is_adaptive .b-page {
      padding-top: 0;
      min-width: 996px
    }

    .is_adaptive .b-page_notify-browser_visible {
      padding-top: 54px
    }
  }

  .ie .b-page {
    display: block
  }

  @media (max-width: 1023px) {
    .is_adaptive .b-parking-new {
      padding-top: 0
    }
  }

  .b-parking-new_bg_city-clouds, .b-parking-new_bg_clouds {
    background: url("data:image/svg+xml,%3Csvg width='1332' height='216' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M753.161 192.363c2.178-7.256 8.897-12.544 16.849-12.544.511 0 1.015.026 1.515.07 3.352-10.94 13.508-18.889 25.519-18.889 9.307 0 17.501 4.776 22.278 12.018 1.152-.195 2.329-.3 3.538-.3 11.675 0 21.14 9.487 21.14 21.188 0 11.702-9.468 21.192-21.14 21.192h-67.402c-6.328 0-11.458-5.144-11.458-11.484a11.477 11.477 0 0 1 9.161-11.251z' fill='%23F2F4F9'/%3E%3Cpath d='M1140.92 102.257c2.11-6.958 8.66-12.035 16.39-12.035.5 0 .99.034 1.48.069 3.26-10.492 13.14-18.122 24.83-18.122a26.03 26.03 0 0 1 21.67 11.527c1.12-.18 2.27-.288 3.44-.288 11.36 0 20.57 9.112 20.57 20.329 0 11.235-9.21 20.34-20.57 20.34h-65.58c-6.15 0-11.15-4.94-11.15-11.017 0-5.334 3.83-9.775 8.92-10.803z' fill='%23E3E6EF'/%3E%3Cpath d='M1317.57 88.32c-3.43-11.411-14.01-19.727-26.54-19.727-.81 0-1.6.042-2.39.111C1283.36 51.5 1267.36 39 1248.44 39c-14.66 0-27.56 7.511-35.09 18.898-1.81-.306-3.67-.47-5.57-.47-18.39 0-33.3 14.918-33.3 33.319 0 18.401 14.91 33.326 33.3 33.326h106.17c9.97 0 18.05-8.09 18.05-18.06 0-8.738-6.2-16.018-14.43-17.693z' fill='%23F9FAFC'/%3E%3Cpath d='M7.133 50.606c1.694-5.567 6.927-9.629 13.113-9.629.399 0 .79.027 1.187.056 2.604-8.394 10.511-14.498 19.86-14.498a20.818 20.818 0 0 1 17.337 9.222c.898-.144 1.82-.23 2.752-.23 9.09 0 16.459 7.29 16.459 16.263 0 8.988-7.369 16.272-16.46 16.272H8.92C4 68.062 0 64.109 0 59.248c.004-4.267 3.065-7.82 7.133-8.642z' fill='%23E3E6EF'/%3E%3Cpath d='M148.455 39.456c-2.745-9.129-11.211-15.781-21.232-15.781-.644 0-1.279.033-1.909.088C121.089 10 108.291 0 93.156 0c-11.73 0-22.054 6.009-28.074 15.119a26.72 26.72 0 0 0-4.46-.377c-14.712 0-26.64 11.935-26.64 26.655 0 14.721 11.931 26.661 26.64 26.661h84.938c7.976 0 14.44-6.472 14.44-14.448 0-6.99-4.958-12.814-11.545-14.154z' fill='%23F2F4F9'/%3E%3C/svg%3E") no-repeat;
    animation: moveClouds 30s linear infinite
  }

  html:not(.is_adaptive) .b-parking-new_bg_clouds {
    animation: moveClouds 60s linear infinite
  }

  @media (min-width: 1024px) {
    .is_adaptive .b-parking-new_bg_clouds {
      animation: moveClouds 60s linear infinite
    }
  }

  .ErrorPage-container {
    display: flex;
    justify-content: center;
    margin-top: 180px;
  }

  .ErrorPage-text {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 384px;
  }

  .ErrorPage-title {
    font-size: 40px;
    font-synthesis: style;
    font-weight: 600;
  }

  .ErrorPage-title, .ErrorPage-subtitle {
    color: #646464;
    line-height: 1.4;
  }

  body, h1, p, pre {
    margin: 0;
  }

  .ErrorPage-subtitle {
    font-size: 18px;
    margin-top: 10px;
  }

  .ErrorPage-errorImageContainer {
    align-items: center;
    display: flex;
    height: 250px;
    justify-content: center;
    margin-left: 20px;
    width: 250px;
  }

  .Button--primary.Button--blue {
    background-color: #0084ff;
    border-color: #0084ff;
    color: #fff;
  }

  .ErrorPage-primaryButton {
    margin-top: 20px;
  }

  .Button--primary {
    border: 1px solid;
    border-radius: 3px;
    line-height: 32px;
    padding: 0 16px;
  }

  .Button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: 0;
    text-align: center;
  }

  a {
    text-decoration: none;
  }
</style>
